<template>
  <div id='goodListItem' class='goodListItem' @click="itemClick">

    <a>
      <!-- 另一种方式来解决下拉加载遇到的问题 -->
      <!-- <img :src="goodsItem.show.img" alt="" @load="imageLoad"> -->
      <img v-lazy="showImage" alt="" @load="itemImg">
      <div>
        <p class="one-txt-cut">{{goodsItem.title}}</p>
        <i>￥</i>
        <span class="price">{{+goodsItem.price}}</span>
        <span class="collect"> {{goodsItem.cfav}}</span>
      </div>
    </a>
  </div>

</template>

<script>
  export default {
    name: 'goodListItem',
    props: { // 父辈向子辈传参
      goodsItem: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    components: { // 组件的引用

    },
    data() {
      return {

      }
    },
    methods: { // 方法
      //监听图片的加载情况
      itemImg() {
        this.$bus.$emit('itemImageLoad')
      },
      itemClick() {
        /* 2种方式,一直是直接用，一直是通过query的方式 */
        path: this.$router.push('/detail' + this.goodsItem.iid)
        // 推荐数据的id
        console.log(this.goodsItem.shop_id);
        /*  this.$router.push({
             path: '/detail',
             query: this.goodsItem.iid

           }) */

      }
    },
    created() { // 实例被创建之后执行代码

    },
    computed: { // 计算属性
      showImage() {
        return this.goodsItem.image || this.goodsItem.show.img
      }

    },
    mounted() { // 页面进入时加载内容

    },
    watch: { // 监测变化

    }
  }

</script>
<style scoped>
  .goodListItem {
    width: 47%;
    margin-left: 2%;
    padding-top: 15px;
  }

  .goodListItem img {
    width: 100%;
    /* height: 230px; */
    border-radius: 10px;
  }

  .goodListItem p {
    margin-top: 5px;
    margin-bottom: 2px;
    font-size: 15px;
    color: black;
  }

  .goodListItem i {
    color: red;
    font-size: 14px;
  }

  .goodListItem .price {
    color: red;
    font-size: 20px;

  }

  .goodListItem .collect {
    margin-left: 10px;
    font-size: 14px;
  }

  .goodListItem .collect::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    background: url("../../../assets/img/home/wujiaoxingkong.svg") 0 0/13px 13px;
  }

</style>
